/* components/home-users/home-users.wxss */
.home-users {
  .search-bar {
    position: relative;

    .search-icon {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 20rpx;
      left: 30rpx;
    }

    .search-input {
      // height: 80rpx;
      background: #FFFFFF;
      border-radius: 40rpx;
      padding: 20rpx 78rpx 20rpx 90rpx;
    }

    .system-icon {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      top: 20rpx;
      right: 30rpx;
    }

  }

  .select-system-icon {
    width: 48rpx;
    height: 48rpx;
    margin: 8rpx 0 0 5rpx;
  }

  .select-bar {
    margin: 20rpx 0 30rpx;
    display: flex;
    column-gap: 20rpx;

    .select-i {
      flex: 1;
      height: 64rpx;
      background: #FFFFFF;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid rgba(0, 0, 0, 0.1);
      font-family: PingFang SC-Regular;
      font-weight: 400;
      font-size: 24rpx;
      color: #313131;
      line-height: 64rpx;
      text-align: center;
    }

    .selected {
      background: #FFF0E6;
      border: 1rpx solid #fcf0e6;
      color: #FF7828;
      border: none;
    }
  }

  .users {
    display: flex;
    flex-wrap: wrap;
    gap: 30rpx;

    .user-card {
      width: calc(50% - 20rpx);
      min-height: 480rpx;
      height: auto;
      background: rgba(218, 255, 243, 0.3);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.05);
      padding: 30rpx 20rpx;
      box-sizing: border-box;
    }

    .maskPicBox {
      width: 100%;
      position: absolute;
      z-index: 60;

      image {
        // width: 40vw;
        width: 10vw;
        height: 20vh;
        border: 1px solid red;
      }
    }

    .headBox {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .headPic {
        // position: absolute;
        // z-index: 120;
        top: 10vw;
        // width: 80%;
        // height: 280rpx;
        border-radius: 180rpx;
        width: 180rpx;
        height: 250rpx;
        clip-path: path('M90 81.5421C90 108.714 68.9691 120 45 120C20.4553 120 0 112.815 0 81.5421C0 67.689 5.80756 56.0844 12.268 38.9748C19.3729 20.1852 25.4553 0 45 0C69.5447 0 70.6186 20.3661 77.732 38.9748C84.3041 56.1964 90 67.689 90 81.5421Z') !important;
      }

      .onlineStatusBox {
        position: absolute;
        top: 10rpx;
        right: 95rpx;
        width: 28rpx;
        height: 28rpx;
        background: #0ac061;
        border-radius: 50%;
      }

      .awayStatusDotBox {
        position: absolute;
        top: 10rpx;
        right: 95rpx;
        width: 28rpx;
        height: 28rpx;
        background: #ffc301;
        border-radius: 50%;
      }

      .offlineDotBox {
        position: absolute;
        top: 10rpx;
        right: 95rpx;
        width: 28rpx;
        height: 28rpx;
        background: #4b4c4c;
        border-radius: 50%;
      }
    }

    .mbitBox {
      width: 100%;
      height: auto;

      image {
        width: 36rpx;
        height: 36rpx;
        margin-left: 10rpx;
      }
    }
  }

  .mt20 {
    margin-top: 20rpx;
  }

  .flexXCenter {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .feedBackBox {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .feedBackBtn {
      padding: 10rpx 25rpx 15rpx;
      background: #ff782a;
      color: #fff;
      border-radius: 50rpx;
      font-size: 22rpx;
    }

    .commonInterestText {
      padding: 10rpx 25rpx;
      background: #FFF0E6;
      color: #FF7828;
      border-radius: 50rpx;
      font-size: 22rpx;
    }
  }
}